<div *ngIf="demand">
    <nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalTitle" [nzWidth]="820" [nzContent]="modalContent" [nzFooter]="modalFooter"
        (nzOnCancel)="handleCancel()">
        <ng-template #modalTitle>
            {{demand.id}} 订单详情 状态:{{demand.status}}
        </ng-template>
        <ng-template #modalContent>
            <!-- wait process finish error -->
            <nz-steps [nzCurrent]="1" nzStatus="process">
                <nz-step nzTitle="抢单" [nzDescription]="demand.acceptTime | date:'yyyy-MM-dd HH:mm:ss'"></nz-step>
                <nz-step nzTitle="支付" [nzDescription]="demand.payTime | date:'yyyy-MM-dd HH:mm:ss'"></nz-step>
                <nz-step nzTitle="处理" [nzDescription]="demand.handleDoneTime | date:'yyyy-MM-dd HH:mm:ss'"></nz-step>
            </nz-steps>
            <div nz-row [nzGutter]="'24'" style="margin-top: 10px;">
                <div nz-col nzSpan="12">
                    <nz-list nzBordered [nzHeader]="Header" [nzFooter]="Footer1">
                        <nz-list-item>{{demand.title}}</nz-list-item>
                        <nz-list-item>提交人:{{demand.publisherName}}</nz-list-item>
                        <nz-list-item>提交时间:{{demand.created | date:'yyyy-MM-dd HH:mm:ss'}}</nz-list-item>
                    </nz-list>
                    <nz-list nzBordered style="margin-top: 8px;">
                        <nz-list-item>{{demand.remarks}}</nz-list-item>
                    </nz-list>
                </div>
                <div nz-col nzSpan="12">
                    <nz-list nzBordered [nzFooter]="Footer2">
                        <nz-list-item>我的报价:{{demand.amount}}(狗粮)</nz-list-item>
                        <nz-list-item>预计时长:{{demand.status}}(分钟)-[{{demand.created | date:'yyyy-MM-dd HH:mm:ss'}}]</nz-list-item>
                        <nz-list-item>剩余时间:10:20</nz-list-item>
                    </nz-list>
                </div>
            </div>
        </ng-template>
        <ng-template #Header>
            <span>车辆信息:{{demand.title}}</span>
        </ng-template>
        <ng-template #Footer1>
            <span *ngIf="demand && demand.attachments">
                文件材料:
                <a *ngFor="let attachment of demand.attachments" [href]="attachment.url" [target]="_blank">
                    &nbsp;
                    <i *ngIf="attachment.suffix === '.bin' || attachment.suffix === '.yhs'" class="anticon anticon-file"></i>
                    <i *ngIf="attachment.suffix === '.jpg' || attachment.suffix === '.png'" class="anticon anticon-picture"></i>
                    {{attachment.suffix}} &nbsp;
                </a>
            </span>
        </ng-template>
        <ng-template #Footer2>
            <span *ngIf="demand && demand.resultAttachments">
                我上传的文件:
                <a *ngFor="let attachment of demand.resultAttachments" [href]="attachment.url" [target]="_blank">
                    &nbsp;
                    <i *ngIf="attachment.suffix === '.bin' || attachment.suffix === '.yhs'" class="anticon anticon-file"></i>
                    <i *ngIf="attachment.suffix === '.jpg' || attachment.suffix === '.png'" class="anticon anticon-picture"></i>
                    {{attachment.suffix}} &nbsp;
                </a>
            </span>
        </ng-template>
        <ng-template #modalFooter>
            <form nz-form [formGroup]="validateForm" [nzLayout]="'inline'">
                <nz-form-item>
                    <nz-upload [(nzFileList)]="fileList" [nzLimit]="5" [nzBeforeUpload]="beforeUpload" nzFileType="image/png,image/jpeg,bin,yhs"
                        nzMultiple="true">
                        <button nz-button>
                            <i class="anticon anticon-upload"></i>
                            <span>选择文件</span>
                        </button>
                    </nz-upload>
                    <!-- <button nz-button [nzType]="'primary'" [nzLoading]="uploading" (click)="handleUpload()" [disabled]="fileList.length == 0"
                        style="margin-top: 16px">
                        {{ uploading ? 'Uploading' : 'Start Upload' }}
                    </button> -->
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <input type="text" formControlName="result" nz-input placeholder="处理结果">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <input type="text" formControlName="description" nz-input placeholder="说明">
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <button nz-button nzType="danger" nzGhost [disabled]="demand.status !== 5">未能处理</button>
                    </nz-form-control>
                </nz-form-item>
                <!-- [disabled]="!validateForm.valid && !isDisabled" -->
                <nz-form-item>
                    <nz-form-control>
                        <button nz-button nzType="primary" (click)="handleOk()" [disabled]="demand.status !== 5" [nzLoading]="isConfirmLoading">完成处理</button>
                    </nz-form-control>
                </nz-form-item>
                <!-- <button nz-button nzType="default" (click)="handleCancel()">关闭</button>
                                <button nz-button nzType="primary" (click)="handleOk()" [disabled]="!validateForm.valid" [nzLoading]="isConfirmLoading">抢单</button> -->
            </form>
        </ng-template>
    </nz-modal>
</div>